<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <ul v-for="(item, index) in fruits" :key="index">
        <li>{{ item }}</li>
      </ul>
    </div>
    <div>
      <p>第二题</p>
      <ul v-for="(item, index) in tusers" :key="index">
        <li>{{ item.name }} - {{ item.age }}</li>
      </ul>
    </div>
    <div>
      <p>第三题</p>
      <input type="text" placeholder="请输入内容" v-model="threeContent" />
      <input type="button" value="添加到列表" @click="threeAdd" />
      <ul v-for="item in threec">
        <li>{{ item }}</li>
      </ul>
    </div>
    <div>
      <p>第四题</p>
      <ul v-for="(item, index) in fourfruits" :key="index">
        <li>
          子数组 {{ index + 1 }}:
          <ul v-for="fruit in item">
            <li style="list-style-type: circle">{{ fruit }}</li>
          </ul>
        </li>
      </ul>
    </div>
    <div>
      <p>第五题</p>
      <p style="font-size: 30px; font: weight">A</p>
      <ul v-for="(item, index) in fusers" :key="index">
        <li v-if="item.group === 'A'">{{ item.name }}</li>
      </ul>
      <p style="font-size: 30px; font: weight">B</p>
      <ul v-for="(item, index) in fusers" :key="index">
        <li v-if="item.group === 'B'">{{ item.name }}</li>
      </ul>
    </div>
    <div>
      <p>第六题</p>
      <input type="button" value="按名字牌序" @click="sname" />
      <input type="button" value="按年龄牌序" @click="sage" />
      <ul v-for="(item, index) in susers" :key="index">
        <li>{{ item.name }} - {{ item.age }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

//第一题
let fruits = ref(['苹果', '香蕉', '橙子'])
//第二题
let tusers = reactive([
  { name: '张三', age: 20 },
  { name: '李四', age: 22 },
])
//第三题
let threeContent = ref('')
let threec = reactive([])
function threeAdd() {
  threec.push(threeContent.value)
  threeContent.value = ''
}
//第四题
let fourfruits = reactive([
  ['苹果', '香蕉'],
  ['橙子', '葡萄'],
])
//第五题
let fusers = reactive([
  { group: 'A', name: '张三' },
  { group: 'B', name: '李四' },
  { group: 'A', name: '王五' },
])
//第六题
let initusers = [
  { name: '张三', age: 20 },
  { name: '李四', age: 22 },
  { name: '王五', age: 18 },
]
let susers = ref(initusers)
function sname() {
  susers.value = initusers
}
function sage() {
  susers.value = initusers.slice().sort((a, b) => a.age - b.age)
}
</script>
